<template>
	<view class="outout">
		
<!-- 		<view class="debug">
			[debug]ref vars: <br>
			x={{props.x}}, y={{props.y}} <br>
			idxIndicatorStyle={{idxIndicatorStyle}}
		</view> -->
		
		<view :class="[ 'idxIndicator', idxIndicatorStyle ]">
			<!-- {{idxIndicatorStyle}} -->
		</view>
		
		<view class="left">
			<!-- Left Content -->
			<view class="leftBar">
				<view class="circle" @click="toUrl('/pages/index/index')">
					<image src="../../static/七彩童年_logo2-removebg-preview.png" mode="aspectFill"></image>
				</view>
				<view class="icon icon1" @click="toUrl('/pages/comment/comment')">
				    <text class="line1">留言</text>
				    <text class="line2">Comment</text>
				</view>
				<view class="icon icon2" @click="toUrl('/pages/works/works')">
				<!-- <navigator class="icon icon2" url="/pages/works/works" open-type="reLaunch"> -->
				    <text class="line1">样片</text>
				    <text class="line2">Works</text>
				</view>
				<view class="icon icon3" @click="toUrl('/pages/appointment/appointment')">
				    <text class="line1">预约</text>
				    <text class="line2">Appointment</text>
				</view>
				<view class="icon icon4" @click="toUrl('/pages/aboutUs/aboutUs')">
				    <text class="line1">关于</text>
				    <text class="line2">About us</text>
				</view>

			</view>
		</view>
		<view class="right">
			<!-- Right Content -->
			<view class="rightButton" @click="toUrl('/pages/my/my')">
			    <uni-icons type="person" size="24"></uni-icons>
			    <text>我的</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { defineProps, ref, onMounted } from "vue";
	import { onLoad, onReady, onShow, onHide, onUnload, onPageScroll } from "@dcloudio/uni-app";
	import { getCurrentIdx } from "@/utils/page.js"
		
	const props = defineProps( {
		x:{
			type: Number,
			default: 0
		},
		y:{
			type: Number,
			default: 0
		}
	} );
	
	const idxIndicatorStyle = ref('');

	onLoad((event) => {
		const paramLastIdx = event.LastIdx ? event.LastIdx : 0;
		console.log("getLastIdx(): get param LastIdx from url: ", paramLastIdx );
		// idxIndicatorStyle.value = `idxIndicator${Number( paramLastIdx )}`
		
		idxIndicatorStyle.value = `idxIndicator${Number( props.x )}`
		setTimeout(() => {
		  idxIndicatorStyle.value = `idxIndicator${props.y}`
		}, 111);
	});

	const toUrl=(url)=>{
		const CurrentIdx = getCurrentIdx();
		uni.reLaunch({
			url:`${url}?LastIdx=${CurrentIdx}`
		})
		console.log("to url:", url);
	}
	
</script>

<style lang="scss">
.outout {
	// border: 1px solid red;
	background-color: rgba(0,0,0,0);
	display: flex;
	width: 100vw;
	
	.debug{
		z-index: 1919810;
		position: absolute;
		transform: translateY(-100px);
		top: 0; left: 0;
	}

	.idxIndicator{
		z-index: 114514;
		position: absolute;
		bottom: 0;
		height: 6rpx;
		width: 60rpx;
		background-color: rgba(250, 150, 0, 0.6);
		box-shadow: 0px -5px 15px 5px rgba(250, 150, 0, 0.4);
		
		transition: all 0.222s ease-out;
	}
	
	.idxIndicator.idxIndicator0{
		left: 53.5rpx; //20+25+8.5
		// transform: translateX(5px); /* 向下平移10px */
		
		transition: all 0.222s ease-out;
	}
	
	.idxIndicator.idxIndicator1{
		left: 158rpx; //25+20+77+10+26
		// transform: translateX(10px); /* 向下平移10px */
		
		transition: all 0.222s ease-out;
	}
	
	.idxIndicator.idxIndicator2{
		left: 270rpx; //25+20+77+10+26+112
		// transform: translateX(15px); /* 向下平移10px */
		
		transition: all 0.222s ease-out;
	}
	
	.idxIndicator.idxIndicator3{
		left: 382rpx; //25+20+77+10+26+112+112
		// transform: translateX(20px); /* 向下平移10px */
		
		transition: all 0.222s ease-out;
	}
	
	.idxIndicator.idxIndicator4{
		left: 490rpx; //25+20+77+10+26+112+112+112
		// transform: translateX(25px); /* 向下平移10px */
		
		transition: all 0.222s ease-out;
	}
	
	.idxIndicator.idxIndicator5{
		left: 650rpx; //25+20+77+10+26+112+112+112
		// transform: translateX(25px); /* 向下平移10px */
		
		transition: all 0.222s ease-out;
	}
	
	
	

	.left {
		// border: 1px solid red;
		height: 100rpx;
		width: 600rpx;
		padding: 0 0 10rpx 25rpx;
		.leftBar{
			box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.4); /* 水平偏移量 垂直偏移量 模糊半径 阴影颜色 */
			height: 100rpx;
			// border: 1px solid red;
			background-color: rgba(250,250,250,0.5);
			backdrop-filter: blur(5px);
			
			border-radius: 40rpx;
			
			display: flex;
			align-items: center;
			padding: 0 20rpx; /* 给左右留一些内边距 */
			
			.circle {
				// border: 1px solid orange;
			    width: 77rpx;
			    height: 77rpx;
				margin-right: 10rpx; /* 给圆和图标间留一些空间 */
			    background-color: white;
				box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); /* 水平偏移量 垂直偏移量 模糊半径 阴影颜色 */				
			    border-radius: 33%;
				
			    display: flex;
			    align-items: center;
			    justify-content: center;
				image{
					height: 100%;
					width: 100%;
				}
			}
			
			.icon {
				// border: 1px solid orange;
			    flex: 1; /* 使每个图标平分剩余的宽度 */
			    display: flex;
				flex-direction: column;
			    align-items: center;
			    justify-content: center;
			    text-align: center; /* 确保文本居中 */
			    height: 100%; /* 根据需要调整高度 */
			    // width: 60px; /* 根据需要调整宽度 */
			    // border: 1px solid red;
			    background-color: rgba(0, 0, 0, 0);
			    padding: 10px; /* 给内部元素留出一些空间 */
			    // margin-right: 10px; /* 如果需要与其他元素之间留空间 */
				
				.line1 {
				    font-size: 25rpx; /* 调整文字大小 */
				    color: black; /* 黑色文字 */
					white-space: nowrap; /* 文本不换行 */
				}
				
				.line2 {
				    font-size: 10rpx; /* 调整文字大小 */
				    color: gray; /* 灰色文字 */
					white-space: nowrap; /* 文本不换行 */
				}
			}

		}
		
	}
	
	.right {
		// border: 1px solid red;
		height: 100rpx;
		width: 150rpx;
		padding: 0 25rpx 10rpx 25rpx;
		
		.rightButton {
			// border: 1px solid red;
			box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.4); /* 水平偏移量 垂直偏移量 模糊半径 阴影颜色 */
		    display: flex;
		    flex-direction: column;
		    align-items: center;
		    justify-content: center;
		    height: 100rpx; /* 适当增加高度以适应上下布局 */
		    width: 100rpx;  /* 设置宽度 */
			background-color: rgba(250,250,250,0.5);
			backdrop-filter: blur(5px);
		    border-radius: 40rpx;
		    // padding: 5px; /* 给内部元素留一些空间 */
			uni-icons {
			    font-size: 10px; /* 设置图标大小 */
			    margin-bottom: 2px; /* 给图标和文字之间留一些空间 */
			}
			text {
			    font-size: 10px; /* 设置文字大小 */
			}
		}

	}
}


</style>
